﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>vue组件3种写法</title>
	<script type="text/javascript" src="bower_components/vue/dist/vue.js"></script>
	<script type="text/javascript">
	window.onload = function(){
		var Aa=Vue.extend({  
			<!-- template:"<h2>标题h2</h2>", -->
			data(){
				return {
					msg:"标题h2"
				}
			},
			methods:{
				change(){
					this.msg="aaaaaaa";
				}
			},
			template:"<h2 @click='change()'>{{msg}}</h2>"   //当组件里面有数据是，data需要以函数的形式，并返回一个对象（json）
			
		});
		//Vue.component("aa",Aa); //1.全局组件写法
		/*Vue.component("aa",{  //3.全局这种用的较多
			template:"<h2>ok</h2>"
		});*/
		var vm=new Vue({
			el:"#box",
			/*components:{
				"aa":Aa    //2.局部组件写法
			}*/
			data:{
				a:"我是父组件"
			},
			components:{
				"aa":{
					data(){
						return {
							"msg":"bbb",
							arr:["a","b","c","d"]
						}
					},
					<!--  template:"<h2 @click='show()'>{{msg}}</h2>"  -->
					<!-- template:"#tem" --> //对应上面script的写法
					props:['mm'],
					template:"#tem2",
					methods:{
						show(){
							alert("ok");
						},
						changes(){
							 this.mm="我被更改了"; 
						}
					}
				}
			}
		});
	}
	
</script>
</head>
<body>
	<!--1.0 -->
	<div id="box">
		<p>{{a}}</p>
		 <aa :mm.sync='a'></aa>   <!--sync 同步修改 2.0已废弃 -->
	</div>
	<!-- <script type="x-template" id="tem">
		<h2 @click='show()'>{{msg}}</h2>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</script> -->
	<template id="tem2">
		<ul>
			<li v-for="val in arr">{{val}}</li>
		</ul>
		<p>我是子组件</p>
		<input type="button" value="btn" @click="changes()"/>
		<strong>{{mm}}</strong>
	</template>

	<br />
	<br />
	<br />
</body>
</html>